<template>
  <div class="ranking">
    <!-- 侧边的选择栏 -->
    <div class="slider_bar">
      <div class="back" @click="back">
        <span class="iconfont icon-youjiantou1"></span>
      </div>
      <div class="wrap">
        <van-sidebar v-model="selectedRanking" background="#fff">
          <template v-for="(direction, directionIndex) in allData">
            <template v-if="selectedDirction == directionIndex">
              <van-sidebar-item
                v-for="(selected, selectedIndex) in direction.subNavis"
                :key="selectedIndex"
                :title="selected.name"
              /> </template
          ></template>
        </van-sidebar>
      </div>
    </div>
    <!-- 上方标签页 -->
    <div class="tabs">
      <van-tabs
        v-model="selectedDirction"
        background="#fff"
        :line-width="13"
        :line-height="3"
        @click="changedirection"
      >
        <!-- <van-skeleton title :row="3" /> -->
        <van-tab
          v-for="(direction, index) in allData"
          :key="index"
          :title="direction.name"
        >
          <div class="rank_list">
            <div class="loading" v-if="!rangkingData">
              <van-loading
                size="30px"
                text-size="30px"
                text-color="#adadad"
              />Loding....
            </div>

            <ul v-if="rangkingData">
              <router-link
                tag="li"
                :to="{
                  name: 'comment',
                  query: { id: data.id, title: data.title },
                }"
                v-for="(data, index) in rangkingData"
                :key="data.id"
              >
                <div class="left">
                  <div class="img">
                    <img :src="data.cover" alt="" />
                  </div>
                </div>
                <div class="right">
                  <p class="book">
                    <i class="name">{{ data.title }}</i>
                    <span class="top_tab" v-if="index < 3"
                      >Top {{ index }}</span
                    >
                  </p>
                  <p class="description">
                    {{ data.content }}
                  </p>
                  <p class="type">
                    <span> {{ data.author }}</span
                    ><i> {{ data.category }}</i>
                  </p>
                </div>
              </router-link>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { getRanking, getRankingDetail } from "../../api/ranking";
export default {
  data() {
    return {
      loading: true,
      //选择模块
      selectedDirction: 0,
      //选择榜单
      selectedRanking: 0,
      // 获取该版块的榜单
      rangkingData: null,
      //所以板块的数据
      allData: null,
      // 通过1级二级下标去获取url,遍历标签页和侧边滑动里面的rangkingdata一样的
    };
  },
  created() {
    this.getRankingFun();
  },

  mounted() {
    this.loading = false;
  },
  watch: {
    // 监听榜单切换即可
    selectedRanking: {
      handler(val) {
        let index = this.selectedDirction;
        if (index == 3 && this.selectedRanking == 4) {
          this.selectedRanking = 3;
        }
        this.selectedslider(index, val);
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    // 模块点击后,获取当前榜单索引的数据
    changedirection() {
      console.log("change", this.selectedDirction, this.selectedRanking);
      this.rangkingData = null;
      if (this.selectedDirction == 3) {
        this.selectedRanking = 0;
      }
      this.selectedslider(this.selectedDirction, this.selectedRanking);
    },
    selectedslider(dirctionIndex, selectedRanking) {
      this.rangkingData = null;
      let url =
        this.allData[dirctionIndex].subNavis[selectedRanking].naviInfos[0].url;
      getRankingDetail({ url })
        .then(({ data: res }) => {
          this.rangkingData = res.list;
          console.log(res);
        })
        .catch((error) => {
          if (error) {
            this.$toast({
              message: "服务器崩溃了",
              position: "middle",
            });
          }
        });
    },
    //获取索引模块的中个榜单对象
    getRankingFun() {
      getRanking()
        .then(({ data: res }) => {
          //获取所有榜单
          this.allData = res.data.list;
          // 选择到两个索引进行获取到排行榜的数据
          this.selectedslider(this.selectedDirction, this.selectedRanking);
        })
        .catch((error) => {
          if (error) {
            this.$toast({
              message: "服务器崩溃了",
              position: "middle",
            });
          }
        });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.loading {
  width: 125px;
  height: 125px;
  position: fixed;
  // margin: 0 auto;
  top: 40%;
  left: 50%;
  // transform: translate(-50%, -50%);
  // background: #fff;
  color: #fff;
  z-index: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}
.ranking {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  background: #fff;
  .tabs {
    padding-top: 20px;
    width: 78%;

    /deep/.van-tabs__nav {
      .van-tab {
        flex: 0 0 45px;
      }
      .van-tab__text--ellipsis {
        color: #bababa;
        font-size: 13px;
      }
      .van-tab--active {
        .van-tab__text--ellipsis {
          font-size: 18px;
          color: #4e4e4e;
        }
      }
    }

    .rank_list {
      overflow-y: scroll;
      height: 90vh;
      ul {
        padding: 8px 12px;
        li {
          display: flex;
          padding: 13px 0;
          // justify-content: space-between;
          .left {
            .img {
              width: 40px;
              height: 52px;
              box-shadow: 3px 2px 8px -3px #706e6b;
              img {
                width: 40px;
                height: 52px;
              }
            }
          }
          .right {
            width: 200px;
            margin-left: 13px;
            line-height: 20px;
            .book {
              display: flex;
              justify-content: space-between;
              i {
                font-style: normal;
                font-size: 18px;
                color: #383838;
                width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                word-break: break-all;
              }
            }
            .description {
              font-size: 12px;
              color: #d5d5d5;
              overflow: hidden; // 溢出隐藏
              white-space: nowrap; // 强制一行
              text-overflow: ellipsis; // 文字溢出显示省略号
              width: 100%;
            }
            .type {
              position: relative;
              color: #a2a2a2;
              font-size: 12px;
              i {
                margin-left: 10px;
              }
              &::after {
                position: absolute;
                top: 50%;
                left: 52px;
                transform: translateY(-50%);
                width: 1px;
                height: 10px;
                content: "";
                background-color: #ececec;
              }
            }
          }
        }
        & li:nth-of-type(1) {
          .book {
            .top_tab {
              display: block;
              width: 37px;
              height: 13px;
              background: #ff4433;
              line-height: 13px;
              text-align: center;
              font-size: 13px;
              color: #fff;
            }
          }
        }
        & li:nth-of-type(2) {
          .book {
            .top_tab {
              display: block;
              width: 37px;
              height: 13px;
              line-height: 13px;
              text-align: center;
              font-size: 13px;
              background: #ff7a00;
            }
          }
        }
        & li:nth-of-type(3) {
          .book {
            .top_tab {
              display: block;
              width: 37px;
              height: 10px;
              background: #ffb800;
              line-height: 10px;
              text-align: center;
              font-size: 13px;
            }
          }
        }
      }
    }
  }
  .slider_bar {
    position: relative;
    width: 22%;
    padding-top: 68px;
    .back {
      position: absolute;
      top: 30px;
      left: 20px;
      .iconfont {
        font-size: 20px;
        color: #8b8886;
      }
    }
    .wrap {
      height: calc(100vh - 68px);
      border-right: 2px solid #f2f2f2;
      /deep/.van-sidebar {
        .van-sidebar-item {
          background-color: #fff;

          .van-sidebar-item__text {
            color: #a2a2a2;
            text-align: center;
            font-size: 13px;
          }
        }
        .van-sidebar-item--select::before {
          position: absolute;
          top: 50%;
          left: 77px;
          width: 1px;
          height: 10px;
          background-color: #ee0a24;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
          content: "";
        }
      }
    }
  }
}
</style>